/*
  学习目标：掌握三种控制条件渲染
  注意： React的条件渲染， 没有v-show的效果
*/

import React from 'react';
import ReactDOM from 'react-dom';

const isLoading = false;

// 1. function + if/esle语句
function loadData() {
  if (isLoading) {
    return <h1>...加载中...</h1>;
  } else {
    return false;
  }
}

const divNode = (
  <div>
    {loadData()}

    {/* 2. 三元 */}
    {isLoading ? <h1>...加载中...</h1> : null}
    {/* 3. 逻辑且运算符 */}
    {isLoading && <h1>...加载中...</h1>}
  </div>
);

ReactDOM.render(divNode, document.getElementById('root'));
